import React from 'react';
import { createForm } from 'rc-form';
import { ToastTips } from '../../../../common/toastTips/tosat';
import styles from './login.css';
import CustBtn from '../../../../common/buttons/Btn';

const Login = ({
  onLogin=()=>{},
  onRegisterView=()=>{},
  form: { getFieldProps, getFieldsValue, validateFields },
}) => {

  const btnProps = {
    textValue:'登录',
    onOk(){
      validData();
    },
  }

  const validData = () => {
    validateFields((error, value) => {
      // console.log(error, value);

      const account = value.account.trim();
      const password = value.password.trim();
      const isPhoneNumber = /^1\d{10}$/;
      if(!account){
        ToastTips('手机号码不能为空', 2000, null);
        return;
      }

      if(!isPhoneNumber.test(account)){
        ToastTips('手机格式不正确', 2000, null);
        return;
      }

      if(!password){
        ToastTips('密码不能为空', 2000, null);
        return;
      }
      
      if(password.length < 6){
        ToastTips('密码不能少于六位', 2000, null);
        return;
      }

      const data = {
        account,
        password
      }
      console.log('value', JSON.stringify(data))
      onLogin(data);
    });
  }

  const Seperator = () => <div style={{marginBottom: '1em'}}></div>;

  return (
    <div className={styles.content}>
      <div className={styles.title}>
        {/* <img src={arrowIcon} className={styles.titleIcon} onClick={() => goBack()}/> */}
        <div className={styles.titleText}>登录</div>
        {/* <img src={writeIcon} className={styles.titleWriteIcon}/> */}
      </div>
      <div className={styles.contentBody}>
        <input type="text"
            {...getFieldProps('account',{
              initialValue:'18298230809',
              rules: [
                { required: true, message: '手机号码不能为空' }
              ]
            })}
            placeholder="请输入11位手机号码"
            maxLength='11'
            className={styles.inputStyle}
          />
        <Seperator/>
        <input type="password"
            {...getFieldProps('password',{
              initialValue:'LiQiao1992718',
              rules: [
                { required: true, message: '密码不能为空' }
              ]
            })}
            placeholder="请输入密码"
            className={styles.inputStyle}
          />
        <Seperator/>
        <div className={styles.childrenBtns}>
          <div className={styles.resetPassword}>忘记密码</div>
          <div className={styles.createAccount}>还没账号 ?
            <span style={{color:'#6CA0F7'}} onClick={()=>onRegisterView()}>去注册</span></div>
        </div>
        <Seperator/>
        <div className={styles.btn}>
          <CustBtn {...btnProps}/>
        </div>
      </div>
    </div>
  );
};

Login.propTypes = {
};

export default createForm()(Login);
